<template>
	<view id="page">
		<nav-bar :navH="navH" :isTabar="true" :isHome="false" :pageName="title"></nav-bar>
        <view class="mess">
        	<view class="flex">
        		<navigator url="../collect/index" hover-class="none" class="flex-i">
        			<image src="../../static/42.png" mode="widthFix" lazy-load="true"></image>
					<text>赞和收藏</text>
        		</navigator>
				<navigator url="../fllow/index" hover-class="none" class="flex-i">
					<image src="../../static/43.png" mode="widthFix" lazy-load="true"></image>
					<text>新增关注</text>
				</navigator>
				<navigator url="../bycomment/index" hover-class="none" class="flex-i">
					<image src="../../static/44.png" mode="widthFix" lazy-load="true"></image>
					<text>评论和@</text>
				</navigator>
        	</view>
			<view class="btn" @click="release"><text class="l">+</text><text class="r">发布信息</text></view>
			<view :class="['mess-alert', isShow === 1 ? '' : 'hide']">
				<view class="mess-box">
					<view class="close" @click="close"></view>
					<view class="flex">
						<view class="flex-i" @click="setType(1)">
							<view :class="['pic', isSelected === 1 ? 'b' : '']">
								<image src="../../static/45.png" mode="widthFix" lazy-load="true" v-show="isSelected !== 1"></image>
								<image src="../../static/48.png" mode="widthFix" lazy-load="true" v-show="isSelected === 1"></image>
							</view>
							<text>图文</text>
						</view>
						<view class="flex-i" @click="setType(2)">
							<view :class="['pic', isSelected === 2 ? 'b' : '']">
								<image src="../../static/46.png" mode="widthFix" lazy-load="true" v-show="isSelected !== 2"></image>
								<image src="../../static/49.png" mode="widthFix" lazy-load="true" v-show="isSelected === 2"></image>
							</view>
							<text>视频</text>
						</view>
						<view class="flex-i" @click="setType(3)">
							<view :class="['pic', isSelected === 3 ? 'b' : '']">
								<image src="../../static/47.png" mode="widthFix" lazy-load="true" v-show="isSelected !== 3"></image>
								<image src="../../static/50.png" mode="widthFix" lazy-load="true" v-show="isSelected === 3"></image>
							</view>
							<text>问答</text>
						</view>
					</view>
					<view class="btn" @click="goCate">下一步</view>
				</view>
			</view>
			<view class="des">
				<text>1. 发布您的心情</text>
				<text>2. 发布您的视频分享</text>
				<text>3. 发布您的读到简介</text>
				<text>4. 发布您的专业知识</text>
			</view>
        </view>
		<tab-bar :selected="2"></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '信息',
				navH: null,
				isSelected: 1,
				isShow: 0,
			}
		},
		onLoad() {
			this.navH = this.$store.state.navHeight;
		},
		// 监听页面隐藏
		onHide() {
			this.isShow = 0;
		},
		// 分享转发
		onShareAppMessage() {
			return {
				title: '爱美指南针',
				path: 'pages/index/index',
			}
		},
		methods: {
			/**
			 * @des 发布信息
			 */
			release() {
				this.isShow = 1;
			},
			/**
			 * @des 选择发布类型
			 */
			setType(i) {
				this.isSelected = i;
			},
			/**
			 * @des 关闭选择窗口
			 */
			close() {
				this.isShow = 0;
			},
			/**
			 * @des 去选择分类
			 */
			goCate(isSelected) {
				uni.navigateTo({
					url: '../selectcate/index?type=' + this.isSelected
				});
				
			}
		}
	}
</script>

<style>
	.mess {padding: 50upx 0; background-color: #fff;}
	.flex {display: flex; justify-content: space-around;}
	.flex .flex-i {}
	.flex .flex-i image {width: 120upx;}
	.flex .flex-i text {display: block; margin-top: 15upx;}
	.mess .btn {display: inline-block; width: 70%; height: 90upx; border-radius: 5px; margin: 100upx 0 50upx; background-color: #82d7d0; vertical-align: middle;}
	.mess .btn .l {display: inline-block; margin-right: 20upx; font-size: 60upx; color: #fff; vertical-align: middle;}
	.mess .btn .r {display: inline-block; margin-top: 10upx; font-size: 32upx; color: #fff; vertical-align: middle;}
	.mess .des {width: 70%; margin: 0 auto 50upx; padding: 20upx 30upx; border: 1px dashed #82d7d0; text-align: left; background-color: #f2fbfa;}
	.mess .des text {display: block; margin: 20upx 0; color: #666;}
	.mess .mess-alert {position: fixed; top: 0; bottom: 0; width: 100%; background-color: rgba(0,0,0,.5); z-index: 999;}
	.mess .mess-box {position: absolute; top: 30%; left: 50%; transform: translateX(-50%); width: 70%; padding: 80upx 20upx; border-radius: 10px; background-color: #fff;}
	.mess .mess-box .flex-i .pic {position: relative; width: 100upx; height: 100upx; border: 1px solid #666; border-radius: 100%;}
	.mess .mess-box .flex-i .pic.b {border-color: #82d7d0;}
	.mess .mess-box image {position: absolute; width: 60upx; top: 50%; left: 50%; transform: translate(-50%, -50%);}
	.mess .mess-box .flex {margin: 30upx 0;}
	.mess .mess-box .btn {margin: 30upx 0; width: 65%; height: 70upx; line-height: 70upx; color: #fff;}
	/** 关闭搜索内容 */
	.close {position: relative; width: 52upx; height: 52upx; box-shadow: 0 0 4px #888; border-radius: 100%; margin-top: -100upx; margin-left: 100%; background-color: #fff;}
	.close::before, .close::after {content: ''; position: absolute; top: 50%; left: 50%; width: 26upx; height: 2upx; background-color: #333;}
	.close::before {transform: translateX(-50%) rotate(45deg);}
	.close::after {transform: translateX(-50%) rotate(135deg);}
</style>
